<template>
  <div class="category-nav">
    <div class="nav-container">
      <router-link 
        to="/meat" 
        class="nav-item" 
        :class="{ active: $route.path === '/meat' }"
        @click="scrollToTop"
      >
        <span class="emoji">🥩</span>
        <span class="text">鲜肉专区</span>
      </router-link>
      <router-link 
        to="/vegetable" 
        class="nav-item" 
        :class="{ active: $route.path === '/vegetable' }"
        @click="scrollToTop"
      >
        <span class="emoji">🥬</span>
        <span class="text">蔬菜专区</span>
      </router-link>
      <router-link 
        to="/fruit" 
        class="nav-item" 
        :class="{ active: $route.path === '/fruit' }"
        @click="scrollToTop"
      >
        <span class="emoji">🍎</span>
        <span class="text">水果专区</span>
      </router-link>
      <router-link 
        to="/others" 
        class="nav-item" 
        :class="{ active: $route.path === '/others' }"
        @click="scrollToTop"
      >
        <span class="emoji">🛒</span>
        <span class="text">其他商品</span>
      </router-link>
    </div>
  </div>
</template>

<script setup>
const scrollToTop = () => {
  // 使用平滑滚动效果
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
</script>

<style scoped>
.category-nav {
  width: 200px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.nav-container {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  background: transparent;
  cursor: pointer;
}

.nav-item:hover {
  background: #f8f9fa;
  transform: translateX(4px);
}

.nav-item.active {
  background: #4CAF50;
  color: white;
}

.nav-item.active:hover {
  background: #45a049;
  transform: translateX(4px);
}

.emoji {
  font-size: 24px;
}

.text {
  flex: 1;
}

@media (max-width: 768px) {
  .category-nav {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .nav-container {
    flex-direction: row;
    padding: 0 10px;
    box-shadow: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-item {
    padding: 8px 12px;
    white-space: nowrap;
  }

  .nav-item:hover {
    transform: translateY(-2px);
  }

  .nav-item.active:hover {
    transform: translateY(-2px);
  }
}
</style> 